<template>
  <div style="width: 100%" class="cc-display">
    <div class="boxOne cc-display so_middle">
      <div style="width: 30%; height: 100%">
        <ClassText
          :textinfo="{ name: '考研英语第一讲', watch: '125', talk: '256' }"
        />
      </div>
      <div style="width: 40%; height: 100%" class="cs-display">
        <UserText :textinfo="{ name: '张老师', order: '125' }" />
      </div>
      <div style="width: 30%; height: 100%" class="es-display">
        <CollectButton textinfo="collect" />
      </div>
    </div>
  </div>
</template>

<script>
import ClassText from "./ClassText.vue";
import UserText from "./UserText.vue";
import CollectButton from "./CollectButton";

export default {
  name: "Introduce",
  components: {
    ClassText,
    UserText,
    CollectButton
  },
  props: {
    msg: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.boxOne {
  height: 80px;
  padding-top: 30px;
}
</style>
